<template>
    <Modal id="r-x-content" v-model="show" :styles="{width:'60%'}" transform title="文件管理器">
        <div v-if="false">
            <div style="width:180px; display:inline-block;margin-right:15px">
                <Select v-model="act_file_type">
                    <Option v-for="item in file_types" :value="item.value" :key="item.value" placeholder="请选择文件类型">{{ item.label }}</Option>
                </Select>
            </div>
            <div style="width:240px; display:inline-block;margin-right:15px">
                <DatePicker type="daterange" style="width:100%" placement="bottom-end" v-model="time" placeholder="选择日期范围"></DatePicker>
            </div>
            <div style="width:200px; display:inline-block;">
                <Input placeholder="请输入进行搜索" icon="search"></Input>
            </div>
        </div>
        <div class="files">
            <CheckboxGroup v-model="checklist">
                <Checkbox :label="item.id" v-for="(item,ind) in fileList" :key="ind" :class="['r-checkbox',{active:checklist.includes(item.name)}]">
                    <div class="file">
                        <img :src="item.src" style="max-width:100%; max-height:94%" v-if="item.type=='image'" @click="showimg(item)">
                        <div v-if="item.type=='video'" class="r-view" @click="showimg(item)">
                            <video style="max-width:100%;max-height:94%">
                                <source :src="item.src" type="video/mp4">
                            </video>
                            <div class="r-view-w">
                                <Icon type="play"></Icon>
                            </div>
                        </div>
                        <div v-if="item.type=='text'">
                            <img src="./imgs/text.png" width="90">
                        </div>
                        <div v-if="item.type=='graphic'">
                            <img src="./imgs/graphic.png" width="90">
                        </div>
                        <div v-if="item.type=='annex'">
                            <img src="./imgs/annex.png" width="90">
                        </div>
                    </div>
                    <h4 class="file_name">{{item.name}}</h4>
                </Checkbox>
            </CheckboxGroup>
        </div>
        <div class="r-footer" slot="footer">
            <Page :total="pageData.total" :current="pageData.current" :page-size="15" size="small" @on-change="goToPage"></Page>
            <div style="padding-right:6px">
                <span style="font-size:14px;line-height:32px">已选中（{{checklist.length}}）个文件</span> &nbsp;&nbsp;&nbsp;
                <Button type="primary" icon="arrow-right-c" @click="insert">插入文章</Button>
            </div>
        </div>
        <Modal v-model="modal.show" transform :title="modal.title" class="r-x-modal">
            <div style="padding:15px" v-if="modal.show">
                <img :src="modal.src" style="width:100%" v-if="modal.type=='image'">
                <video style="width:100%" v-if="modal.type=='video'" controls>
                    <source :src="modal.src" type="video/mp4">
                </video>
            </div>
        </Modal>
    </Modal>
</template>

<script>
export default {
    data() {
		return {
			act_file_type: '',
            time: '',
            file_types: [
                {label: '图片', value: '1'},
                {label: '视频', value: '2'},
                {label: '文档', value: '3'},
            ],
            checklist: [],
            fileList: [],
            pageData: {
                total: 15,
                current: 1,
            },
            modal: {
                show: false,
                title: '',
                type: '',
                src: ''
            }
		}
    },
    props: {
        value: {
			type: Boolean,
			default: false
		},
    },
    methods: {
        showimg(item) {
            this.modal.show = false
            this.modal = {
                show: true,
                title: item.name,
                src: item.src,
                type: item.type
            }
        },
        goToPage(pageNo) {
            this.load(pageNo)
        },
        insert() {
            let data = this.fileList.filter(item=>this.checklist.includes(item.id))
            this.$parent.show = false
            this.$emit('on-insert',data)
        },
        load(page=1) {
            this.$http.get('api/material/v1/material/info?page='+page).then(res=> {
                this.fileList = res.data.map(item=>({
                    id: item.id,
                    type: item.type,
                    name: item.title,
                    src: item.content
                }))
                this.pageData = {
                    total: res.pages.total,
                    current: res.pages.current_page
                }
                
            })
        }
    },
    computed: {
		show: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit('input',val)
			}
		}
    },
    created() {
        this.load()
    }
}
</script>

<style lang="less">
#r-x-content {
    ul {
        margin: 0;
    }
    .files {
        padding:10px 15px;
        height: 432px;
        .r-checkbox {
            display: inline-block;
            padding: 12px 10px 8px 12px;
            width: 130px;
            height: 160px;
            overflow: hidden;
            position: relative;
            margin-right: 15px;
            border-radius: 3px;
            &:hover, &.active {
                background: #f3f3f3;
            }
            .x-checkbox-text {
                height: auto;
                padding: 0;
                width: 100%;
                height: 100%;
                position: relative;
            }
        }
        .file {
            height: 130px;
            display: flex;
            justify-content: center;
            align-items: center;
            .r-view {
                position: relative;
                .r-view-w {
                    position: absolute;
                    top: 0; left: 0;
                    right: 0; bottom: 0;
                    background: rgba(0, 0, 0, .5);
                    color: #fff;
                    font-size: 35px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        .file_name {
            margin:0;
            position: absolute;
            bottom: 4px; 
            left: 0;
            text-align: center;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ivu-checkbox {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 100;
        }
    }
    .r-footer {
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .ivu-modal-wrap, .ivu-modal-mask {
        z-index: 70000;
    }
}
.r-x-modal {
    .x-modal-size-middle {
        width: 45%;
    }
    .ivu-modal-wrap, .ivu-modal-mask {
        z-index: 75000;
    }
}
</style>
